<!-- 编辑文章 -->
<template>
    <div>
        <!-- 卡片视图 -->
        <el-card shadow="never">
            <el-form ref="editArticleform" :rules="rules" :model="editArticleform" label-width="80px">
                <el-form-item label="上次更新" prop="update_time">
                    {{editArticleform.update_time | dataFormat}}
                </el-form-item>
                <el-form-item label="文章标题" prop="title">
                    <el-input v-model="editArticleform.title"></el-input>
                </el-form-item>
                <el-form-item label="文章分类" prop="cate_id">
                    <el-cascader width="10" v-model="selectedKeys" :options="CateList" :props="cascaderProps" @change="parentCateChanged" clearable></el-cascader>
                    {{editArticleform.cate_name}}
                </el-form-item>

                <el-form-item label="缩略图" prop="image">
                    <Upload @returnImgUrl="returnImgUrl" :imageUrl="editArticleform.image"></Upload>
                </el-form-item>
                <el-form-item label="显示类型" prop="flag">
                    <el-radio-group v-model="editArticleform.flag">
                        <el-radio :label="0">无</el-radio>
                        <el-radio :label="1">推荐</el-radio>
                        <el-radio :label="2">置顶</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="关键字" prop="keywords">
                    <el-input v-model="editArticleform.keywords"></el-input>
                </el-form-item>
                <el-form-item label="文章描述" prop="desc">
                    <el-input type="textarea" v-model="editArticleform.desc"></el-input>
                </el-form-item>
                <el-form-item label="文章内容" prop="content">
                    <mavon-editor v-model="editArticleform.content" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即保存</el-button>
                    <el-button @click="reSet">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import Upload from '@/components/upload'

    export default {
        components: {
            Upload,
        },
        data() {
            return {
                // 选中的父级Id数组
                selectedKeys: [],
                // 三级分类列表
                CateList: [],
                // 指定级联选择器的配置对象
                cascaderProps: {
                    // 配置触发选项 hover/click
                    expandTrigger: 'click',
                    value: 'cate_id',
                    label: 'cate_name',
                    children: 'children',
                },

                editArticleform: {},
                // 级联选择器配置
                rules: {
                    title: [
                        {
                            required: true,
                            message: '请输入文章标题',
                            trigger: 'blur',
                        },
                        {
                            min: 5,
                            message: '长度在最少为5个字符',
                            trigger: 'blur',
                        },
                    ],
                    flag: [
                        {
                            required: true,
                            message: '请选择显示类型',
                            trigger: 'change',
                        },
                    ],
                },
            }
        },
        created() {
            this.getCateList()
            this.getBlogOne()
        },
        methods: {
            returnImgUrl(returnImgUrl) {
                this.editArticleform.image = returnImgUrl
            },
            async getBlogOne() {
                let id = this.$route.params.id
                const { data: res } = await this.$http.get(`/article/${id}`)
                if (res.status !== 200) {
                    return this.$message.error(res.message)
                }
                this.editArticleform = res.results[0]
                //给级联选项赋值cate_id
                this.selectedKeys = res.results[0].cate_id
                console.log(this.selectedKeys)
                this.editArticleform.update_time = res.results[0].update_time
            },

            onSubmit() {
                this.$refs.editArticleform.validate(async valid => {
                    if (valid) {
                        const { data: res } = await this.$http.put(
                            '/article/' + this.editArticleform.id,
                            this.editArticleform
                        )
                        console.log(this.editArticleform)
                        if (res.status !== 200) {
                            return this.$message.error(res.message)
                        }
                        console.log(res)
                        this.$message.success(res.message)
                        this.$router.push('/blogList')
                    }
                })
            },

            reSet() {
                this.$router.push('/blogList')
            },

            // 获取三级分类的数据
            async getCateList() {
                const { data: res } = await this.$http.get('category_parent', {
                    params: { level: 2 },
                })
                if (res.status !== 200) {
                    return this.$message.error(res.message)
                }
                this.CateList = res.results
                console.log(this.CateList)
            },
            // 级联选择器选中项变化时出发
            parentCateChanged() {
                console.log(this.selectedKeys.length)
                // 如何selectKeys 数组的长度>0 说明选中父级分类
                if (this.selectedKeys.length > 0) {
                    // 父级分类的Id
                    this.editArticleform.cate_id =
                        this.selectedKeys[this.selectedKeys.length - 1]
                    // 当前分类的等级
                    // this.addArticleform.cate_level = this.selectedKeys.length;
                    return 0
                } else {
                    // 父级分类的Id
                    this.editArticleform.cate_id = 0
                    // 当前分类的等级
                    // this.addArticleform.cate_level = 0;
                }
            },
        },
    }
</script>
<style lang="scss" scoped>
</style>


